<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>创建</title>
</head>

<body>

    <h3>测试Document.prototype提供的函数</h3>

    <ol>
        <li>Document.prototype.createElement( tagName )</li>
        <li>Document.prototype.createAttribute( attrName )</li>
        <li>Document.prototype.createComment</li>
        <li>Document.prototype.createTextNode</li>
    </ol>

    <div class="container"></div>


    <script type="text/javascript">
        let c = document.querySelector('.container');

        let comment = document.createComment('这是用JavaScript创建的注释');
        c.appendChild(comment);

        let textNode = document.createTextNode('出生日期');
        c.appendChild(textNode);

        // 创建并返回一个 元素 ( Element )
        let d = document.createElement('input'); // '<input>'
        d.setAttribute('type', 'date'); // 设置创建的<input>元素的属性，'<input type="date">'

        // 创建并返回一个 属性节点 ( Attr )
        let attr = document.createAttribute('name');
        attr.value = 'birthdate';
        console.log(attr);

        // 为 d 所引用的 元素 设置 属性节点
        d.setAttributeNode(attr);

        // 将新创建的元素 d 添加到 指定元素 c 内部末尾
        c.appendChild(d);
    </script>

</body>

</html>